import Home from '~V/Home.vue'
// 懒加载模式
// const Home = () => import('~V/Home');
import Argu from '~V/argu.vue'

export default [
  {
    path: '/login',
    name: 'login',
    component: () => import('~V/login.vue') // 路由懒加载
  },
  {
    path: '/',
    name: 'Home', // 命名路由，使用：<router-link :to="{ name: 'home' }">Home</router-link> 跳转
    alias: 'home_page', // 设置别名，地址访问home_page的时候，同样显示home页面
    component: Home, // 访问的路由
    props: route => ({ // 路由组件传参：函数模式，route是参数，代表当前的路由对象
      food: route.query.food // /home?food=banana
    }),
    beforeEnter: (to, from, next) => { // 路由独享的守卫
      // if (from.name === 'about') alert('这是从about来的')
      // else alert('这不是从about来的')
      next() // 一定要调用next(),要不然不会跳转 !!!
    },
    meta: { // 路由元信息
      title: '首页'
    }
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('~V/About.vue'), // 路由懒加载
    props: { // 对象模式
      food: 'banana'
    }
  },
  {
    path: '/argu/:name', // name是动态路由参数 地址栏输入/argu/ 后面不管输入什么，匹配的都是这个路由
    // 这样能实现组件的复用，只要传不同的参数，加载的路由是同一个，同样的页面可以处理不同的逻辑
    component: Argu,
    props: true // 路由组件传参：布尔模式，第一种方式，在动态路由有参数的路由配置中
  },
  {
    path: '/parent', // 路由嵌套
    name: 'parent',
    component: () => import('@/views/parent.vue'),
    children: [
      {
        path: 'child', // 子路由前面不用加 ‘/’ 会自动补全
        component: () => import('@/views/child.vue')
      }
    ]
  },
  {
    path: '/named_view', // 命名视图
    components: { // 注意：components要加s，是引入多个组件
      default: () => import('@/views/child.vue'), // 默认加载路由
      email: () => import('@/views/email.vue'),
      tel: () => import('@/views/tel.vue')
    }
  },
  {
    path: '/main', // 路由重定向 当地址输入/main的时候，会重定向到home页
    // redirect: '/', // 基础写法
    // redirect: { // 命名路由的方式
    //   name: 'home'
    // },
    // redirect: to => {
    //   console.log(to)
    // 打印to：为当前访问的路由对象 ，可以在里面处理一些逻辑
    // {
    //   fullPath: "/main",
    //   hash："",
    //   matched: [{…}],
    //   meta: {},
    //   name: undefined,
    //   params: {},
    //   path: "/main",
    //   query: {}
    // }
    // return { // 返回命名路由
    //   name: 'home'
    // }
    // return '/' // 或者返回路径
    // },
    redirect: to => '/' // 此为上面的简写
  },
  {
    path: '/count-to',
    name: 'count_to',
    component: () => import('@/views/count-to.vue')
  },
  {
    path: '/split-pane',
    name: 'split-pane',
    component: () => import('@/views/split-pane.vue')
  },
  {
    path: '/store',
    component: () => import('@/views/store.vue')
  },
  { // 404页面一定要定义到最后，路由的优先级是，前面的优先级高，同一个路由，会使用前面的
    path: '*',
    name: '*',
    component: () => import('@/views/404.vue')
  }
]
